<template>
	<view class="commonList ovfxh">
		<u-sticky :enable="isShowSearch">
			<view class="searchInputStyle">

				<u-button type="primary" v-if="$gx.HasPermission(40302)" @click="addBtn()" class="addBtn">
					<u-icon labelPos="bottom" class="codeIcon" name="plus" color="#fff" size="24"></u-icon>
				</u-button>
				<u-search v-model="filterData._SearchInput" placeholder="在用绳检测编码/钢丝绳编码" :clearabled="true"
					:show-action="false" shape="square" @search="searchData" @clear="searchData"></u-search>
				<u-icon labelPos="bottom" @click="codeSearch(2)" class="codeIcon" name="scan" color="#BFBFBF"
					size="48"></u-icon>
			</view>
		</u-sticky>
		<view class="cons-ul">
			<touchView ref="touchViews" v-for="item in list" :key="item.autoID" @clearTouch="clearTouch">
				<view class="cons-li posr" >
					<view class="title topTitle">
						<u-image class="dahuiIcon" v-if="item.reportModel && item.reportModel.status == 1" width="45rpx"
							mode="widthFix" src="/static/img/dahui.png"></u-image>
						<text class="label-name">在用绳编码：{{ item.usingWireropeModel ? item.usingWireropeModel.code : "-" }}</text>
						<u-tag class="statusTag fr" :type="item.status | enumsType($enums.CheckWirerope_Status)" :text="item.status | enums($enums.CheckWirerope_Status)" plain>
						</u-tag>
					</view>
					<u-line class="marb-20" color="#E5E5E5"></u-line>

					<u-row gutter="0" class="mart-20 marb-20">
						<u-col span="12" class="uni-commit">
							<text class="label-name">检测单位：</text>
							<text>{{ item.checkUnit || '-' }}</text>
						</u-col>
					</u-row>

					<u-row gutter="0" class="mart-20 marb-20">
						<u-col span="6" class="uni-commit">
							<text class="label-name">检测人员：</text>
							<text>{{ item.checkUserName || '-' }}</text>
						</u-col>
						<u-col span="6" class="uni-commit">
							<text class="label-name">检测日期：</text>
							<text>{{ item.checkDate | ymd }}</text>
						</u-col>
					</u-row>

					<u-row gutter="0" class="mart-20 marb-20">
						<u-col span="12" class="uni-commit">
							<text class="label-name">下次检测日期：</text>
							<text>{{ item.nextCheckDate |ymd }}</text>
						</u-col>
					</u-row>

					<u-row gutter="0" class="mart-20 marb-30">
						<u-col span="6" class="uni-commit">
							<text class="label-name">创建人姓名：</text>
							<text>{{ item.createUserName || '-' }}</text>
						</u-col>
						<u-col span="6" class="uni-commit">
							<text class="label-name">创建时间：</text>
							<text>{{ item.createDate | ymd }}</text>
						</u-col>
					</u-row>
					<u-row gutter="0" class="mart-20 marb-30">
						<u-col span="6" class="uni-commit">
							<text class="label-name">提交人：</text>
							<text>{{ item.submitUserName || '-' }}</text>
						</u-col>
						<u-col span="6" class="uni-commit">
							<text class="label-name">提交时间：</text>
							<text>{{ item.submitDate | ymd }}</text>
						</u-col>
					</u-row>

					<u-row gutter="0" class="btnBox mart-20 ">
						<template>
							<u-col span="3" v-if="item.status==$enums.CheckWirerope_Status.待检测&&$gx.HasPermission(40303)">
								<u-button type="primary" size="small"
									@click="showDetailDialog(item, '检测')">检测</u-button>
							</u-col>
							<u-col span="3">
								<u-button type="warning" size="small" @click="showDetailDialog(item, '详情')">详情
								</u-button>
							</u-col>
						</template>
					</u-row>
				</view>

			</touchView>
		</view>

		<searchPopup ref="searchPopup" @AdvanceSearch="searchData" @ClearSearch="clearSearch">
			<u--form :model="filterData" ref="searchForm" label-position="top" :labelWidth="120">
				<u-form-item label="钢丝绳名称">
					<u--input v-model="filterData._Name" placeholder="请输入钢丝绳名称"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item label="规格型号">
					<u--input v-model="filterData._GuiGe" placeholder="请输入规格型号"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item label="检测单位">
					<u--input v-model="filterData._CheckUnit" placeholder="请输入检测单位"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item label="检测日期" @click="calendarShow = true">
				    <u--input v-model="CompleteDate" type="text" disabledColor="#ffffff" placeholder="点击选择时间" disabled />
				    <u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-calendar :show="calendarShow" mode="range" @close="calendarClose" @confirm="changeCalendar"></u-calendar>
				<u-form-item label="矿山">
				    <ld-select class="ldSel w-100" :multiple="true" label-key="name" value-key="autoID" table="Department" action="GetSearchWithIsDelete" :filter="{ _Type: $enums.Department_Type.矿山 }" label="name" value="autoID" placeholder="请选择矿山" clearable v-model="filterData._DepartmentIDs" @change="depChange"></ld-select>
				</u-form-item>
				<u-form-item label="状态">
					<ld-select class="ldSel w-100" :multiple="true" :isLoadingData="false" placeholder="请选择状态"
						clearable :inList="$enums.CheckWirerope_Status.ToArray()" labelKey="text" value="value" v-model="filterData._Statuss" @change="statusChange"></ld-select>
				</u-form-item>
			</u--form>
		</searchPopup>

		<view class="hei-30"></view>
	</view>
</template>

<script>
	import ldSelect from '@/components/ld-select/ld-select.vue'
	export default {
		components: {
			ldSelect
		},
		data() {
			return {
				//查询分页所需要的数据
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				orderBy: "checkWireropeID desc",

				//搜索条件对象
				filterData: {
					_DepartmentIDs:[],
					_HoisterIDs:[]
				},
				list: [], //列表数据

				hasMore: true, //是否可以加载更多
				isShowSearch: true, //是否显示顶部搜索框，这里不是为了控制显示不显示，而是要处理在离开本页时把这个隐藏，否则会报错

				calendarShow: false,
				CompleteDate: "",

			};
		},
		//生命周期-加载
		onLoad: function(option) {
			let that = this;
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif

			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			if(option){
				that.filterData._SearchInput=option.code;
			}
		},
		//生命周期-显示
		onReady() {
			// this.initSelect();
			this.isShowSearch = true;
			this.GetPage();
			// 	return item.value != 0
			// })
		},

		//生命周期-隐藏
		onHide() {
			this.isShowSearch = false;
		},

		onShow() {
			uni.$off('refreshData');
			uni.$on('refreshData', res => {
				this.RefreshData();
			});
		},

		//生命周期-下拉刷新
		onPullDownRefresh() {
			this.RefreshData();
		},

		//生命周期-上拉加载更多
		onReachBottom() {
			if (this.hasMore) {
				this.pageIndex++;
				this.GetPage();
			}
		},

		onNavigationBarButtonTap(e) {
			if (e.text == "筛选") {
				this.show = false;
				this.$nextTick(() => {
					this.$refs.searchPopup.init();
				});
			}
		},

		methods: {
			addBtn() {
				this.showDetailDialog({}, '新增');
			},
			statusChange(val) {
				if(val=='')val=[];
				this.$set(this.filterData,'_Statuss',val);
			},
			depChange(val) {
			    this.$set(this.filterData, "_DepartmentIDs", val);
			},
			//扫码
			codeSearch(type) {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: (res) => {
						if (!this.$gx.IsEmpty(res.result)) {
							let code = res.result;
							this.filterData._SearchInput = code;
							this.searchData();
						} else {
							this.$app.Tips({
								title: "扫码信息格式不正确！"
							});
						}
					},
					fail: () => {
						// this.$app.Tips({ title: "扫码失败，请联系管理员！" });
					},
					complete: () => {
							
					}
				});
			},
			// 回退所有的touchView
			clearTouch() {
				this.$refs.touchViews.forEach(element => {
					element.hide();
				});
			},
			//分页
			GetPage(clearFlag) {
				const own = this;
				this.$app.ShowLoading();
				if (clearFlag) this.list = [];
				this.$app.CallApi(this.$app.api.CheckWirerope.GetPage(this.pageIndex, this.pageSize, this.orderBy), {
					data: this.filterData,
					success: (res) => {
						this.totalCount = res.totalCount;
						this.list = this.list.concat(res.items);
						this.$app.HideLoading();
						if (this.totalCount <= this.list.length) {
							this.hasMore = false;
						}
					}
				});
			},

			searchData() {
				this.RefreshData();
			},

			//搜索
			RefreshData() {
				this.pageIndex = 1;
				this.list = [];
				this.hasMore = true;
				this.GetPage();
			},

			showDetailDialog(row, operateType) {
				let url = '/pages/ropeDetection/detail';
				uni.navigateTo({
					url: url,
					success: function(res) {
						res.eventChannel.emit('editData', {
							data: row,
							operateType: operateType
						});
					}
				});
			},
			calendarClose() {
			    this.calendarShow = false;
			},
			changeCalendar(data) {
			    this.filterData._CheckDate_Begin = data[0];
			    this.filterData._CheckDate_End = data[data.length-1];
			    this.CompleteDate = data[0] + "-" + data[data.length-1];
				this.calendarShow = false;
			},
			clearSearch() {
				this.calendarShow = false;
				this.CompleteDate="";
				this.filterData._CheckDate_Begin = null;
				this.filterData._CheckDate_End = null;
				this.filterData._SearchInput = "";
				this.filterData._Name = "";
				this.filterData._GuiGe="";
				this.filterData._CheckUnit="";
				this.filterData._Statuss=[];
				this.filterData._DepartmentIDs = [];
				this.searchData();
			},

		}
	};
</script>

<style scoped>
	.commonList .cons-li {
		background-color: white;
	}

	.noPadding {
		padding: 0px !important;
	}

	.btnBox{
		justify-content:center !important;
		margin-left:-20rpx;
		margin-right:-20rpx;
	}
	
	.btnBox ::v-deep .u-col{
		min-width: 130rpx;
		margin-left:20rpx;
		margin-right:20rpx;
	}

	.searchInputStyle {
		display: flex;
		align-items: center;
	}

	.topTitle {
		display: flex;
	}

	.topTitle .label-name {
		flex: 2;
	}
</style>